<template>
	<view class="Refund_data">
		<view class="refund" v-for="(item,index) in orderDetails" :key="index">
			<view class="cu-item">
				<view class="refund_top">
					<view class="">
						订单编号：{{item.mealCode}}
					</view>
					<view class="">
						取餐号：{{item.orderCode}}
					</view>
				</view>
				<view class="refund_top cu-list sm-border card-menu margin-top">
					<view class="">
						<view class="content" v-for="itex in item.orderDetails">
							<view class="">
								<view class=""></view>
								<view class="text-cut">{{itex.foodName}}<text class="text-cut text-red">({{itex.stapleNumber}}份)</text></view>
							</view>
							<view class="action">
								<view class=""></view>
							</view>
						</view>
					</view>

				</view>
				<view class="company">
					取餐地址：<text class="company">{{item.companyName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				orderDetails: null,
			}
		},
		onShow() {
			this.selectShopping()
		},
		onPullDownRefresh() {
			this.selectShopping()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		computed:{
			...mapState(['openid'])
		},
		methods: {
			selectShopping() {
				this.request.selectShopping({
					oppenId: this.openid
				}).then(res => {
					let order = res.filter(item => {
						return item.orderCode != null
					})
					this.orderDetails = order.reverse();
					let date = res.map(item => {
						return item.mealCode
					});
				})
			}
		}
	}
</script>

<style>
	.Refund_data {
		margin-top: 30rpx;
	}

	.refund {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;
	}

	.refund_top {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.company {
		margin-top: 20rpx;
		font-weight: 500;
		font-size: 30rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
	}
</style>
